<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?= $title; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/dice.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet">
<script type="text/javascript" src="../js/addAnimate.js"></script>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="../js/debug.js"></script>
<script type="text/javascript" src="../js/MessageBox.js"></script>
<script type="text/javascript" src="../js/show_army.js"></script>
<script type="text/javascript" src="../js/RiskView.js"></script>
<script type="text/javascript" src="../js/Risk-2.js"></script>
<script type="text/javascript" src="../js/wz_jsgraphics.js"></script>
<script type="text/javascript" src="../js/mapper.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
<script type="text/javascript" src="../js/RollDice.js"></script>
<script type="text/javascript" src="../js/chat_room.js"></script>
<script>
	var refreshTime = <?= $refreshTime ? $refreshTime : '2000'; ?>;

	var playersJSON = <?= $playersJSON ?>;
	var playerStateJSON = <?= $playerStateJSON ?>;
	function sendLogoutRequest() {
		if (sendReq.readyState == 4 || sendReq.readyState == 0) {
			sendReq.open("POST", '../library/game_room.php', true);
			sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			sendReq.onreadystatechange = sendLogoutRequestCallBack; 
			var param = 'logout=1';
			sendReq.send(param);
		}				
	}
	
	function sendLogoutRequestCallBack() {
		if (sendReq.readyState == 4) {
			window.location = "../views/login.html";
			//var response = eval("(" + sendReq.responseText + ")");
			//document.getElementById('login_status').innerHTML = response.status;

		}
	}

/*
    $("#accordion").accordion(
      { header: "h3" }
    );
  });
*/
</script>
<style>
/*
 * from ricky's view
 */
.attacking {

	font-size: 20pt;
}

#gameStatusDiv {
	font-size: 14pt;
	color: red;
}
.yellow {

	background-color: yellow;
}
.ball {
background-repeat: no-repeat;
display: block;
height: 32px;
line-height: 32px;
text-align: center;
width: 32px;
}

td.h1{
	background-image:url(../images/risk_logo.png);
	background-repeat:no-repeat;
	width:280px;
	height:110px;
}

.chat_time {

	font-style: italic;

	font-size: 9px;

}
/*end of ricky*/

.ownedLands {
	color: gray;
	font-size: 8pt;
}

#myStatusDiv {
	position: fixed;
	right: 0;
	top: 0;
	background: white;
	opacity: 0.8;
	z-index: 1;
	font-size: 8pt;
	width: 200px;
}
.playerState {
	color: red;
	font-size:8pt;
}
#playerStatusDiv{
	width: 280px;	
}
.playerStatusName{
	font-weight: bold;
	font-size: 14pt;
	padding-right: 10px;
}
.playerStatusName .ball{
	display:inline-block;
	padding-right: 10px;
}

#coveringDiv {
	width: 100%;
	height: 100%;
	position: fixed;
	left:0;
	top:0;
}

#messageBox {
	background: white;
}

#userInfo {
	font-size: 10pt;
	color: while;
	background: grey;
	display:none;
}
/*
#areaDiv {
p
	position: fixed;
	left: 0;
	top: 50%;
	background: white;
	opacity: 0.5;
	z-index: 1;
}

#playerStatusDiv {
	position: fixed;
	left: 0;
	top: 0;
	background: white;
	opacity: 0.5;
	z-index: 1;
}
*/
</style>

<!--Fireworks CS3 Dreamweaver CS3 target.  Created Wed Apr 28 06:04:33 GMT+0800 2010-->
</head>
<body bgcolor="#ffffff">
    <div id="div_chat_small">
    </div>
    <div id="button"  style="z-index:10;">    
        
        <ul id="chat_box_container" class="the_menu">
        
        <div id="chat_room" style="background-color:white;">
        	<div id="chat_room_div">
            	<font style="font-family:'Courier New', Courier, monospace;font-size:28px"> Chat Room </font>
                <div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;">
            </div>
              <form id="frmmain" name="frmmain" onSubmit="return blockSubmit();">
    
                <input type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" onClick="javascript:getChatText();" />
    
                <textarea type="text" id="txt_message" name="txt_message" cols="45" rows="5" style="resize:none"> </textarea> 
    
                <input type="button" name="btn_send_chat" id="btn_send_chat" value="Send" onClick="javascript:sendChatText();" />
    
              </form>
            </div>
        </div>
        </ul>
    
      <img src="../images/chat_room_button.png" width="184" height="32" class="menu_class" />
     </div> 
<table id='containerTable'>
<tr>
	<td class='h1'>
		<div id='myStatusDiv'>
		<div id='eClient'></div>
		<input type=button onclick="stopTimer()" value="stopTimer" />
		<!--
		<ul>
		<? foreach (array_keys($stateTree) as $gameState): ?>
			<li <?= $state['gameState'] == $gameState ? "style='color:red'" : ""?>><?= $gameState ?>
			<ul style='color:black'>
				<? foreach ($stateTree[$gameState] as $playerState): ?>
				<li><a href="#"><?= $playerState ?></a>
				<? endforeach; ?>
			</ul>

		<? endforeach; ?>
		</ul>
		-->
		</div>

		<div id='messageBox'>messageBox</div>
		<div id='playerStatusDiv'></div><!-- end of div#playerStatusDiv --> 
		

		<!-- Accordion 
		<h2 class="demoHeaders">Accordion</h2>
		<div id="accordion">
			<div>
				<h3><a href="#">First</a></h3>
				<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
			</div>
			<div>
				<h3><a href="#">Second</a></h3>
				<div>Phasellus mattis tincidunt nibh.</div>
			</div>
			<div>
				<h3><a href="#">Third</a></h3>
				<div>Nam dui erat, auctor a, dignissim quis.</div>
			</div>
		</div>	
		</div>	-->
		
		<br />
		<br />
<!--
		Chat Room <br />
		<textarea readonly cols=15>not functional yet</textarea><br />
		<input type='text' name='inputBox' size=10/><input type='button' name='send' value='send' disabled size=5/>

		<br />
		<br />
-->
<a href="#" onclick="javascript:sendLogoutRequest();"> Logout </a> 
<br />
<br />
		<div id='userInfo'>userInfo</div>




<table>
<tr>
    <td id="chat_room_container" style="width:500px;height:110px">
    </td>
</tr>
</table>


	</td>

	<td>
    	<div id="attackFrom" style="visibility:hidden;position:absolute"></div>
        <div id="attackTo" style="visibility:hidden;position:absolute"></div>
		<div id='mapDiv'>
			<img name="index" src="<?= $map->imageSrc ?>" width="1024" height="771" border="0" id="index" usemap="#m_index" alt="" />

			<?= $map->htmlString ?>

		</div><!-- end of div#mapDiv -->
		<div id='armyDiv'>
		</div><!-- end of div#armyDiv -->
	</td>


</tr>
</table><!-- end of table#containerTable -->

<!-- For chat room and optional contents -->
<table id="chat_room_table">
	<tr>
    	<td>
 			
    </td>
        <td id="optional_contain_container">
        
        </td> 
</table>

<div id='coveringDiv'>
</div>

</body>
